<div class="row">
    <div class="col-md-4" style="margin-bottom: 15px; margin-left: 15px">
        <button type="button" class="btn btn-success" onclick="clear_and_toggle()">
            添加资源
        </button>
    </div>


    <div class="col-md-12">
        <div class="col-md-4">
            <div class="box box-success">
                <div class="box-header with-border">
                    <h3 class="box-title">Mongo 资源管理</h3>

                    <div class="box-tools pull-right">
                    </div>
                </div>
                <div class="box-body no-padding">
                    <table class="table table-striped">
                        <thead>
                        <tr>
                            <th>资源名</th>
                            <th>主机名</th>
                            <th>端口</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody id="tab_row_Mongo">
                        <tr>
                            <td>{1}</td>
                            <td>{2}</td>
                            <td>{3}</td>
                            <td>
                                <a class="fa fa-trash-o" onclick="delete_res('Mongo', '{1}')"></a>
                                &nbsp;&nbsp;<a class="fa fa-edit" onclick="modify_resource('Mongo', '{1}')"></a>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">MySql 资源管理</h3>

                    <div class="box-tools pull-right">
                    </div>
                </div>
                <!-- /.box-header -->
                <div class="box-body no-padding">
                    <table class="table table-striped">
                        <thead>
                        <tr>
                            <th>资源名</th>
                            <th>主机名</th>
                            <th>端口</th>
                            <th>用户名</th>
                            <th style="width: 50px">操作</th>
                        </tr>
                        </thead>
                        <tbody id="tab_row_Mysql">
                        <tr>
                            <td>{1}</td>
                            <td>{2}</td>
                            <td>{3}</td>
                            <td>{4}</td>
                            <td>
                                <a class="fa fa-trash-o" onclick="delete_res('Mysql', '{1}')"></a>
                                &nbsp;&nbsp;<a class="fa fa-edit" onclick="modify_resource('Mysql', '{1}')"></a>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>

        </div>


        <div class="col-md-4">
            <div class="box box-danger">
                <div class="box-header with-border">
                    <h3 class="box-title">Redis 资源管理</h3>

                    <div class="box-tools pull-right">
                    </div>
                </div>
                <!-- /.box-header -->
                <div class="box-body no-padding">
                    <table class="table table-striped">
                        <thead>
                        <tr>
                            <th>资源名</th>
                            <th>主机名</th>
                            <th>端口</th>
                            <th style="width: 50px">操作</th>
                        </tr>
                        </thead>
                        <tbody id="tab_row_Redis">
                        <tr>
                            <td>{1}</td>
                            <td>{2}</td>
                            <td>{3}</td>
                            <td>
                                <a class="fa fa-trash-o" onclick="delete_res('Redis', '{1}')"></a>
                                &nbsp;&nbsp;<a class="fa fa-edit" onclick="modify_resource('Redis', '{1}')"></a>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span></button>
                <h4 class="modal-title">添加/编辑资源</h4>
            </div>
            <div class="modal-body">
                <form action="" method="post" class="form form-horizontal responsive">
                    <div class="form-group">
                        <label class="col-xs-3 control-label">资源名</label>
                        <div class="formControls col-xs-9">
                            <input type="text" class="form-control" id="name" placeholder="资源名">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-xs-3 control-label">类型</label>
                        <div class="formControls col-xs-9">
                            <input type="text" class="form-control" id="type" placeholder="Mysql/Mongo/Redis">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-xs-3 control-label">Host</label>
                        <div class="formControls col-xs-9">
                            <input type="text" class="form-control" id="host" placeholder="主机名">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-xs-3 control-label">Port</label>
                        <div class="formControls col-xs-9">
                            <input type="text" class="form-control" id="post" placeholder="端口">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-xs-3 control-label">User</label>
                        <div class="formControls col-xs-9">
                            <input type="text" class="form-control" id="user" placeholder="如不需要请置空">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-xs-3 control-label">PassWord</label>
                        <div class="formControls col-xs-9">
                            <input type="text" class="form-control" id="password" placeholder="如不需要请置空">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default pull-left" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-success" onclick="add_res()">确认添加</button>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="../const.js"></script>
<script type="text/javascript" src="mycommon.js"></script>

<script>
    _db_cache = {};
    function init_table(name) {
        var id_type = '#tab_row_' + name;
        var html = $(id_type).html();
        $(id_type).empty();
        var GET_URL = POST_URL_PREFIX + "/get_resources?type=" + name;
        console.log(GET_URL);
        $.get(GET_URL).success(function (dat) {
            console.log(dat);
            for (var i = 0; i < dat.length; ++i) {
                var cur = dat[i];
                _db_cache[name + '_' + cur["name"]] = cur["detail"];
                var ins = html.format(i + 1, cur["name"], cur["detail"]["host"], cur["detail"]["post"], cur["detail"]["user"]);
                $(id_type).append(ins);
            }
        });
    }
    init_table('Mysql');
    init_table('Redis');
    init_table('Mongo');
</script>

<script>
    function add_res() {
        var res = {
            name: $('#name').val(),
            type: $('#type').val(),
            detail: {
                host: $('#host').val(),
                post: $('#post').val(),
                user: $('#user').val(),
                password: $('#password').val()
            }
        };
        var POST_URL = POST_URL_PREFIX + "/add_resources";
        var dat = JSON.stringify(res);
        console.log(dat);
        console.log(POST_URL);
        $.post(POST_URL, {json_result: dat}).success(function () {
            alert("操作成功！");
            $("#myModal2").modal("toggle");
            reload_content();
        });
    }
</script>

<script>
    function delete_res(type, name) {
        if (confirm("注意：真的删除资源: " + name + "?")) {
            var GET_URL = POST_URL_PREFIX + "/delete_resources?name=" + name + "&type=" + type;
            console.log(GET_URL);
            $.getJSON(GET_URL).success(function (dat) {
                console.log(dat);
                alert("操作成功！");
                reload_content();
            });
        }
    }
</script>

<script>
    function clear_and_toggle() {
        $("#myModal2 input").each(function () {
            $(this).val("");
        });
        $("#name").attr("disabled", false);
        $("#type").attr("disabled", false);
        $("#myModal2").modal("toggle");
    }
    function modify_resource(type, name) {
        clear_and_toggle();
        var detail = _db_cache[type + "_" + name];
        console.log(detail);
        $("#name").attr("disabled", true);
        $("#type").attr("disabled", true);
        $("#name").val(name);
        $("#type").val(type);
        $("#host").val(detail["host"]);
        $("#post").val(detail["post"]);
        $("#user").val(detail["user"]);
    }
</script>

